<template>
	<div class="page loginfor" v-loading="loading">
		<div class="header-logo-wrap">
			<div class="header-logo"></div>
		</div>
		<div class="body">
			<div class="login-wrap">
				<div class="login-title">可视化大屏搭建平台</div>
				<div class="login-user">
					<img class="login-user-icon" src="./user.png" />
					<input class="login-user-input" maxlength="20" placeholder="请输入用户名" type="text" v-model="username" />
					<i @click="onDeleteInput" class="el-icon-close login-user-delete" v-show="isShowDelIcon"></i>
				</div>
				<div class="split"></div>

				<div class="login-user">
					<img class="login-user-icon" src="./password.png" />
					<input
						@keyup.13="doLogin($event)"
						class="login-user-input"
						maxlength="12"
						placeholder="请输入密码"
						type="password"
						v-model="password"
					/>
					<i class="el-icon-close login-user-delete" style="opacity: 0"></i>
				</div>
				<div class="split"></div>
				<div @click="onLogin" class="login-btn">登 录</div>
			</div>
			<!-- <div class="footer" @click="getalluser()">获取所有用户信息（在console输出）</div> -->
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			username: '',
			password: '',
			loading: false,
		}
	},
	methods: {
		doLogin() {
			this.onLogin()
		},
		onLogin() {
			if (this.username === '') {
				this.$message('用户名不能为空')
				return ''
			} else if (this.password === '') {
				this.$message('密码不能为空')
				return ''
			}
			this.loading = true
			this.$axios
				.post('/auth/login', {
					username: this.username,
					password: this.password,
				})
				.then(res => {
					this.loading = false
					this.getUserInfo()
					this.$mUtils.setLocalStorage('token', 'Bearer ' + res.body.token)
					localStorage.setItem("uname",this.username);
					this.$router.push('/')
				})
				.catch(() => {
					this.loading = false
				})
		},
		/**
		 * 删除用户文本框内容
		 */
		onDeleteInput() {
			this.username = ''
		},
		/**
		 * 获取用户信息
		 */
		getUserInfo() {
			this.$axios.get('/user/info').then(res => {
				this.$store.dispatch('updateUserInfo', res.body)
			})
		},
		getalluser() {
			this.$axios.get('/auth/getalluser').then(res => {
				console.log(res)
			})
		},
	},
	computed: {
		isShowDelIcon: function () {
			return this.username.length > 0
		},
	},
}
</script>

<style lang="stylus">
.loginfor {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	background-image: url('./login-background.png');
	background-size: 100% 100%;
	background-repeat: no-repeat;
	.header-logo-wrap {
		width: 100%;
		height: 130px;
		display: flex;
		flex-direction: row;
		align-items: center;
		.header-logo {
			background: url('./logo.png');
			width: 180px;
			height: 34px;
			margin-left: 378px;
			margin-top: 110px;
			display: inline-block;
		}
		.header-text {
			margin-left: 21px;
			display: inline-block;
			color: white;
			font-size: 18px;
		}
	}
	.footer {
		position: absolute;
		width: 100%;
		bottom: 108px;
		color: white;
		font-size: 15px;
		text-align: center;
	}
	.body {
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		position: relative;
		width: 100%;
		height: 100%;
	}
	.login-wrap {
		display: flex;
		flex-direction: column;
		width: 400px;
		height: 380px;
		margin-top: 159px;
		margin-right: 359px;
		background: #ffffff;
		border-radius: 12px;
		.login-title {
			width: 100%;
			height: 120px;
			flex-direction: row;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 24px;
			font-weight: 600;
			color: #1F63EC;
			// line-height: 33px;
			// margin-bottom: 30px;
		}
		.login-user {
			display: flex;
			alin-align-items: center;
			margin-top: 22px;
			.login-user-icon {
				margin-left: 35px;
				margin-right: 10px;
				width: 18px;
			}
			.login-user-input {
				border: none;
				outline: none;
				box-shadow: none;
				width: 100%;
			}
			.login-user-delete {
				width: 15px;
				height: 15px;
				margin-right: 35px;
			}
		}
		.split {
			margin: 5px 35px 10px 35px;
			border: 1px solid rgb(221, 221, 221);
		}
		.login-btn {
			width: 320px;
			height: 50px;
			background: #2F74FF;
			border-radius: 8px;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #fff;
			margin: 44px auto;
			font-size: 15px;
		}
		.login-btn:hover {
			opacity: 0.8;
			cursor: pointer;
		}
	}
}
</style>
